<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        <div>
             <!-- text和textarea: 默认使用value属性和input事件,添加.lazy修饰符,可以将事件改为change事件 -->
            <h2>.lazy</h2>
            <p><input type="text" v-model.lazy="msg"></p>
            <p>msg: {{msg}}</p>
        </div>
        
        <div>
            <!-- 从输入框取值默认是字符串类型   => 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符 -->
           <h2>.number</h2>
           <p><input type="text" v-model.number="count"></p>
           <p>count: {{count}}</p>
           <p>typeof: {{typeof count}}</p>
       </div>

       <div>
        <!-- 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： -->
       <h2>.trim</h2>
       <p><input type="text" v-model.trim="str"></p>
       <p>str:{{str}}</p>
   </div>



     

      
       

    </div>
</body>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            count:0,
            str:""
        },
       
    })


</script>
</html>